<template>
  <el-container>
    <el-main>
      <el-table :data="items.filter(data => !search || data.clazz.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" border
                size="mini">
        <el-table-column prop="clazz" label="分类" width="120"/>
        <el-table-column prop="lang" label="语言" width="80"/>
        <el-table-column prop="reg" label="正则（点击复制）">
          <template slot-scope="{row}">
            <span class="cursor_pointer" @click="copy(row)">{{ row.reg }}</span>
            <el-tooltip v-if="row.desc" effect="dark" :content="row.desc" placement="right">
              <i class="el-icon-question ml-5"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="demo" label="代码例子">
          <template slot-scope="{row}">
            <code v-html="row.demo" @click="clickEvent($event)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
        search: '',
        items: [
          {
            clazz: '邮箱（Email）', lang: 'java',
            reg: '^([A-Za-z0-9_\\-\\.\\u4e00-\\u9fa5])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,8})$',
            demo: `boolean matches = Pattern.compile("^([A-Za-z0-9_\\\\-\\\\.\\\\u4e00-\\\\u9fa5])+\\\\@([A-Za-z0-9_\\\\-\\\\.])+\\\\.([A-Za-z]{2,8})$").matcher("test中文@126.com.cn").matches();`,
            desc: '注意copy的时候反斜杠会被自动去除的问题'
          },
          {
            clazz: '身份证（IDCard）', lang: 'java',
            reg: '^(\\d{15}$)|(^\\d{17}([0-9]|[xX]))$',
            demo: '',
            desc: '匹配15位和18位身份证'
          },
          {
            clazz: '手机号（Phone）', lang: 'java',
            reg: '^1[3-9]\\d{9}$',
            demo: `boolean matches = Pattern.compile("^1[3-9]\\\\d{9}$").matcher("15888888888").matches();`,
            desc: '匹配国内11位手机号'
          },
          {
            clazz: '中文', lang: 'java',
            reg: '[\\u4e00-\\u9fa5]',
            demo: ''
          },
          {
            clazz: '网址（Url）', lang: 'java',
            reg: '^(http(s)?:\\/\\/)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:[0-9]{1,5})?[-a-zA-Z0-9()@:%_\\\\\\+\\.~#?&//=]*$',
            demo: `
<a href="https://gist.github.com/dperini/729294" target="_blank">大牛们写的各种匹配 URL 的正则表达式</a><br/>
<a href="https://mathiasbynens.be/demo/url-regex" target="_blank">正则表达式部分汇总</a>
`,
            desc: '匹配http和https，并没有最正确的匹配规则，请依据业务调整'
          }
        ]
      }
    },
    mounted() {
      const _this = this
      utools.onPluginEnter(({code, type, payload, optional}) => {
        // console.log('用户进入插件', 'Feature.code:' + code, 'feature.cmd.type:' + type, payload)
        // 设置子输入框，重复利用utools的数据框，
        utools.setSubInput(({text}) => {
          _this.search = text
        }, '搜索')
        // 子输入框获得焦点选中
        utools.subInputFocus()
        // 如果code不为空且不是 regex, regex 是最顶级的特性
        if (code && code !== 'regex') {
          // 设置子输入框的值，就进行搜索了
          utools.setSubInputValue(code)
          // _this.search = code
        }
      })
    },
    methods: {
      copy(row) {
        // 点击赋值当前的正则
        // 如果不需要回调：
        // this.$copyText(row.reg)
        // 如果需要回调：
        this.$copyText(row.reg)
        .then(e => {
          this.$message({
            message: '成功复制到剪贴板',
            type: 'success',
            duration: 1000
          })
        }, function (e) {
          this.$message.error('复制失败')
        })
      },
      clickEvent(e) {
        // 默认在v-html渲染的代码中不能使用vue的方法，但是可以通过父级的监控去获取用户操作事件
        if (e.target.nodeName.toLowerCase() === 'a') {
          // 调用utools的方法进行跳转
          utools.ubrowser.goto(e.target.href)
          .run()
        }
      }
    }
  }
</script>

<style scoped>
.cursor_pointer {
  cursor: pointer;
}

.copy_span {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
  padding: 20px;
}

.ml-5 {
  margin-left: 5px;
}
</style>
